<template>
    <div class="header">    
        <router-link tag="div" to="/user" class="iconfont icon-yonghu"></router-link >
        <div class="name">
            CloudMusic
            <van-icon @click="changeLang" name="ellipsis" />
        </div>
        <van-icon class="search" name="search" @click="handleSearch"/>
    </div>
</template>

<script>
import { Icon } from 'vant';
export default {
    name:'',
    data(){
       return {

       }
    },
    methods: {
        handleSearch(){
            this.$emit('handle-search')
        },
        changeLang() {
            let type = this.$i18n.locale
            type = type === 'zh' ? 'en' : 'zh'
            this.$i18n.locale = type
        }
    },
    components: {
        [Icon.name]: Icon
    }
}
</script>

<style scoped lang="less">
    .header{
        display: flex;
        align-items: center;
        width: 100%;
        height: 40px;
        line-height: 40px;
        background: #d43c33;
        .name{
            flex: 1;
            text-align: center;
            color: #fff;
            font-weight: 600;
            font-size: 18px;
        }
        .search{
            width: 50px;
            font-size: 19px;
            color: #fff;
            text-align: center;
        }
        .icon-yonghu{
            width: 50px;
            font-size: 19px;
            color: #fff;
            text-align: center;
        }
    }
</style>
